<script setup>
import {shopCustomStore} from '@/stores/modules/shop/index.js'
import AvatarIcon from '@/assets/images/avatar.png'
import {useRouter} from 'vue-router'

const router = useRouter();
const clickMenu = (name) => {
  router.push({name: name})
}
const store = shopCustomStore()
</script>
<template>
  <div class="mine-infos-view">
    <div class="info-box flex-view">
      <img :src="AvatarIcon" class="avatar-img">
      <div class="name-box">
        <h2 class="nick">{{ store.custom_user_name ||'尊敬的新用户' }}</h2>
        <div class="age">
          <span>活跃1天</span>
          <span class="give-point"></span>
        </div>
      </div>
    </div>
    <div class="counts-view">
      <div class="counts flex-view">
        <div class="split-line">
        </div>
        <div class="mine-item flex-view" @click="clickMenu('userinfoEdit')">
          <el-icon>
            <Edit/>
          </el-icon>
          <span>编辑资料</span>
        </div>
        <div class="split-line"></div>
        <div class="mine-item flex-view" @click="clickMenu('security')">
          <el-icon>
            <User/>
          </el-icon>
          <span>修改密码</span>
        </div>
      </div>
    </div>
    <div class="order-box">
      <div class="title">订单中心</div>
      <div class="list">
        <div class="mine-item flex-view" @click="clickMenu('orderview')">
          <el-icon>
            <Notebook/>
          </el-icon>
          <span>我的订单</span>
        </div>
        <div class="mine-item flex-view" @click="clickMenu('address')">
          <el-icon>
            <HomeFilled/>
          </el-icon>
          <span>地址管理</span>
        </div>
        <div class="mine-item flex-view" @click="clickMenu('establish')">
          <el-icon>
            <Edit/>
          </el-icon>
          <span>宠物建档</span>
        </div>
        <div class="mine-item flex-view" @click="clickMenu('reservation')">
          <el-icon>
            <Plus/>
          </el-icon>
          <span>预约寄养</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.flex-view {
  display: flex;
}

.mine-infos-view {
  width: 235px;
  margin-right: 20px;
  border: 1px solid #cedce4;
  height: fit-content;
}

.info-box {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 16px 16px 0;
  overflow: hidden;
}

.avatar-img {
  width: 48px;
  height: 48px;
  margin-right: 16px;
  border-radius: 50%;
}

.name-box {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
}

.nick {
  color: #152844;
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  height: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}

.age {
  font-size: 12px;
  color: #6f6f6f;
  height: 16px;
  line-height: 16px;
  margin-top: 8px;
}

.give-point {
  color: #4684e2;
  cursor: pointer;
  float: right;
}


.counts-view {
  border: none;
  padding: 16px;
}

.counts {
  margin-top: 12px;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
}

.text {
  height: 16px;
  line-height: 16px;
  color: #6f6f6f;
}

.num {
  height: 18px;
  line-height: 18px;
  color: #152844;
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
}

.split-line {
  width: 1px;
  height: 24px;
  background: #dae6f9;
}


.intro-box {
  border-top: 1px solid #cedce4;
  padding: 16px;
}

.title {
  color: #6f6f6f;
  font-size: 12px;
  line-height: 16px;
}

.intro-content {
  color: #152844;
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 8px 0;
}


.create-box {
  cursor: pointer;
  border-top: 1px solid #cedce4;
  padding: 16px;
}

.title {
  position: relative;
  color: #152844;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  height: 18px;
}

.counts {
  margin-top: 12px;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  cursor: pointer;
}


.order-box {
  border-top: 1px solid #cedce4;
  padding: 16px;
}

.title {
  color: #152844;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  height: 18px;
  margin-bottom: 8px;
}

.list {
  padding-left: 16px;
}

.mine-item {
  border-top: 1px dashed #cedce4;
  cursor: pointer;
  height: 48px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  margin: 0 auto;
}

img {
  width: 24px;
  margin-right: 8px;
  height: 24px;
}

span {
  color: #152844;
  font-size: 14px;
}


.mine-item:first-child {
  border: none;
}


.setting-box {
  border-top: 1px solid #cedce4;
  padding: 16px;
}

.title {
  color: #152844;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  height: 18px;
  margin-bottom: 8px;
}

.list {
  padding-left: 16px;
}

.mine-item {
  border-top: 1px dashed #cedce4;
  cursor: pointer;
  height: 48px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

img {
  width: 24px;
  margin-right: 8px;
  height: 24px;
}

span {
  color: #152844;
  font-size: 14px;
}


.mine-item:first-child {
  border: none;
}

.el-icon {
  margin-right: 10px;
}

</style>